<style lang="stylus">
.point-to-vip
  .cur-score
    color #868686
    background-color #e6e6e6
    height 100px
  .share-point
    line-height 50px
    border-radius 25px
    background-color #5243bf
  .vip-remark
    width 161px
    height 109px
    background url("../assets/search/current_03.jpg") no-repeat
    background-size cover
  .vip-area
    padding 62px 26px 57px 40px
  .day
    width 150px
    line-height 100px
    color #717171
    border 3px solid #ededed
    border-radius 6px
    justify-content center
    & + .day
      margin-left 16px
    &.active
      color #5142be
      border-color #5142be
  input
    border 3px solid #ededed
    background transparent
    line-height 67px
    width 100%
    box-sizing border-box
  .exchange
    border-radius 6px
    background-color #5044bf
    line-height 80px
  .mgt-64
    margin-top 64px
  .remark
    color #838383
</style>

<template lang="pug">
.point-to-vip
  title-bar(title="积分换VIP")
  .flex.cur-score.pdl-20.pdr-38
    .bold 当前积分：{{user.score}}
    .flex-1
    .white.fz-26.share-point.center.pdh-16(@click="onLinkPage('/task')") 免费赚积分
  .flex.vip-area
    .flex.column
      .vip-remark
      .bold.fz-34.mgt-20 葡萄VIP
    .mgl-40
      .flex
        .day.fz-44.flex(v-for="(day, index) in days", :key="index", :class="{active: selectedIdx === index && !selectedDay}", @click="onSelectDay(index)")
          .bold {{day}}
          .fz-18.mgl-10.pdt-14 天
      input.pdl-26.mgt-12(type="number", placeholder='输入希望兑换的天数', maxlength='5', v-model="selectedDay")
  .exchange.white.fz-32.mgh-20.center(@click="onExchange") 兑换
  .mgt-64.pdl-20
    .fz-28.bold 兑换说明：
    .remark.fz-22.mgt-30(v-for="(remark, index) in remarks", :key="index") {{index + 1}}、{{remark}}
</template>

<script>
import TitleBar from '../components/TitleBar.vue'

const days = [5, 15, 30]
export default {
  name: 'point-to-vip',
  components: { TitleBar },

  data() {
    return {
      days,
      selectedIdx: 0,
      remarks: ['10积分=1天VIP会员', '兑换后不可进行兑换处理', '若有问题请联系我们'],
      selectedDay: ''
    }
  },

  methods: {
    onSelectDay(idx) {
      this.selectedIdx = idx
    },

    onExchange() {
      const day = this.selectedDay ? this.selectedDay : days[this.selectedIdx]
      this.$confirm('VIP兑换', `确认兑换${day}天的会员吗`).then(() => {
        this.$get('user/vip/use/score', {
          score: day,
          userId: this.userId
        }).then(() => this.$get('user/info', {
          userId: this.userId
        })).then(user => {
          this.user = user
          this.saveStore('user', user)
          this.$toast('兑换成功')
        })
      })
    }
  }
}
</script>
